<template>
  <el-page-header @back="goBack" style="margin: 20px 50px">
    <template #content>
        <span class="text-large font-600 mr-3"> 我收藏的店铺 </span>
        <el-tag>这里有您收藏的店铺信息</el-tag>
    </template>
  </el-page-header>
  <el-main>
    <el-table
          :data="collections"
          style="min-width: 100%; height: 80vh; margin-top: 10px"
        >
          <el-table-column prop="cover" label="店铺封面" align="center">
            <template v-slot="scope">
        <el-image :src="scope.row.cover" style="width: 100px; height: 100px" :zoom-rate="1.2" :preview-src-list="[scope.row.cover]" fit="cover"  preview-teleported="true" :initial-index="0"/>
      </template>
          </el-table-column>
          <el-table-column prop="name" width="100px" align="center" label="店铺名称"></el-table-column>
          <el-table-column prop="address" align="center" label="地址"></el-table-column>
          <el-table-column prop="createTime" align="center" label="收藏时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="scope">
        <el-button type="warning" size="small" @click="toShopStore(scope.row.shopId)">进入店铺</el-button>
        <el-button type="danger" size="small" @click="delCollect(scope.row.shopId)">取消收藏</el-button>
      </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(totalItems)"
          @size-change="collectList()"
          @current-change="collectList()"
        />
  </el-main>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { getList,delList } from '@/api/collect'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const dataDetail = reactive({
        searchParams: {
        pageNum: 1,
        pageSize: 5
      },
      totalItems: '',
      collections:[]
    })
    const router = useRouter()
    const goBack = () => {
      window.history.back()
    }
    const toShopStore= (sid) =>{
        router.push({
        name: 'shop-detail',
        params: { id: sid }
      })
    }
    const collectList=()=>{
        getList(dataDetail.searchParams).then((res)=>{
            if(res){
                dataDetail.collections=res.data.content
                dataDetail.totalItems=res.data.totalSize
            }
        })
    }
    const delCollect=(shopId)=>{
      delList({shopId:shopId}).then((res)=>{
        if(res.data>0){
          collectList()
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }
    collectList()
    return {
      goBack,
      ...toRefs(dataDetail),
      toShopStore,
      delCollect
    }
  }
}
</script>

<style lang="scss" scoped></style>
